<template>
  <div class="container">
    <section class="main">
      <div class="title">
        <span>·····</span>
        <h3>车场名称</h3>
        <span>·····</span>
      </div>
      <div class="fare_detail">
        <h3>{{fare_name}}</h3>
        <div class="fare_license">
          <div class="num-box">
            <div class="num"  @click="clickKeyWordWrap(0)" :style="{'background':getBackground(0)}">
                <span :style="{'color':getColor(0)}">{{formData.num0}}</span>
            </div>
            <div class="num" @click="clickKeyWordWrap(1)" :style="{'background':getBackground(1)}"><span :style="{'color':getColor(1)}">{{formData.num1}}</span></div>
            <em class="spot"></em>
            <div class="num" @click="clickKeyWordWrap(2)" :style="{'background':getBackground(2)}"><span :style="{'color':getColor(2)}">{{formData.num2}}</span></div>
            <div class="num" @click="clickKeyWordWrap(3)" :style="{'background':getBackground(3)}"><span :style="{'color':getColor(3)}">{{formData.num3}}</span></div>
            <div class="num" @click="clickKeyWordWrap(4)" :style="{'background':getBackground(4)}"><span :style="{'color':getColor(4)}">{{formData.num4}}</span></div>
            <div class="num" @click="clickKeyWordWrap(5)" :style="{'background':getBackground(5)}"><span :style="{'color':getColor(5)}">{{formData.num5}}</span></div>
            <div class="num" @click="clickKeyWordWrap(6)" :style="{'background':getBackground(6)}"><span :style="{'color':getColor(6)}">{{formData.num6}}</span></div>
            <div class="num farechoose" @click="clickKeyWordWrap(7)" ref="energy">
              <img src="../assets/images/add.png" alt="">
              <label>新能源</label>
            </div>
            <div v-if="formData.commonCard == '2'" class="num" @click="clickKeyWordWrap(7)" :style="{'background':getBackground(7)}"><span :style="{'color':getColor(7)}">{{formData.num7}}</span></div>
          </div>
          <div class="prompt-text">
            {{promptText}}
          </div>
        </div>
        <div class="ok_btn">
          <button @click="submitFn">确认缴费</button>
        </div>
      </div>

      <!-- 键盘省份选择 -->
      <div class="first-word-wrap"
      v-if="firstWrapStatus">
        <div class="first-word"
          @click="selectFirstWord($event)">
          <div class="word">
            <span>京</span>
          </div>
          <div class="word">
            <span>沪</span>
          </div>
          <div class="word">
            <span>粤</span>
          </div>
          <div class="word">
            <span>津</span>
          </div>
          <div class="word">
            <span>冀</span>
          </div>
          <div class="word">
            <span>晋</span>
          </div>
          <div class="word">
            <span>蒙</span>
          </div>
          <div class="word">
            <span>辽</span>
          </div>
          <div class="word">
            <span>吉</span>
          </div>
          <div class="word">
            <span>黑</span>
          </div>
          <div class="word close_word" @click="closeFirstWord">
            <span>关闭</span>
          </div>
        </div>
        <div class="first-word"
          @click="selectFirstWord($event)">
          <div class="word">
            <span>苏</span>
          </div>
          <div class="word">
            <span>浙</span>
          </div>
          <div class="word">
            <span>皖</span>
          </div>
          <div class="word">
            <span>闽</span>
          </div>
          <div class="word">
            <span>赣</span>
          </div>
          <div class="word">
            <span>鲁</span>
          </div>
          <div class="word">
            <span>豫</span>
          </div>
          <div class="word">
            <span>鄂</span>
          </div>
          <div class="word">
            <span>湘</span>
          </div>
          <div class="word">
            <span>军</span>
          </div>
        </div>
        <div class="first-word"
          @click="selectFirstWord($event)">
          <div class="word">
            <span>桂</span>
          </div>
          <div class="word">
            <span>琼</span>
          </div>
          <div class="word">
            <span>渝</span>
          </div>
          <div class="word">
            <span>川</span>
          </div>
          <div class="word">
            <span>贵</span>
          </div>
          <div class="word">
            <span>云</span>
          </div>
          <div class="word">
            <span>藏</span>
          </div>
          <div class="word">
            <span>陕</span>
          </div>
          <div class="word">
            <span>兰</span>
          </div>
        </div>
        <div class="first-word"
          @click="selectFirstWord($event)">
          <div class="word">
            <span>济</span>
          </div>
          <div class="word">
            <span>甘</span>
          </div>
          <div class="word">
            <span>青</span>
          </div>
          <div class="word">
            <span>宁</span>
          </div>
          <div class="word">
            <span>新</span>
          </div>
          <div class="word">
            <span>使</span>
          </div>
          <div class="word">
            <span>警</span>
          </div>
        </div>
      </div>

      <!-- 键盘数字字母选择 -->
      <div class="keyboard-wrap" v-if="keyBoardStatus === true">
        <!-- <div class="number-wrap"></div>
        <div class="letter-wrap"></div>
        <div class="cn-wrap"></div> -->
        <div class="keyboard">
          <span v-for="(item,index) in allKeyWord._1"
            :key="index"
            @click="clickKeyBoard(item)">{{item}}</span>
            <span @click="closekeyBoard" class="close_word">关闭</span>
        </div>
        <div class="keyboard">
          <span v-for="(item,index) in allKeyWord._3"
            :key="index"
            @click="clickKeyBoard(item)">{{item}}</span>
        </div>
        <div class="keyboard">
          <span v-for="(item,index) in allKeyWord._4"
            :key="index"
            @click="clickKeyBoard(item)">{{item}}</span>
        </div>
        <div class="keyboard">
          <span v-for="(item,index) in allKeyWord._5"
            :key="index"
            @click="clickKeyBoard(item)">{{item}}</span>
            <span class="delete" @click="deleteWord" v-if="formData.commonCard == '2'"><img src="../assets/images/icon-delete.png" alt=""></span>
        </div>
        <!-- <div class="keyboard">
          <span v-for="(item,index) in allKeyWord._7"
            :key="index"
            @click="clickKeyBoard(item)">{{item}}</span>
            <span class="delete" @click="deleteWord"><img src="../assets/images/icon-delete.png" alt=""></span>
        </div> -->
        <!-- <div class="cancel">
          <span @click="keyBoardStatus = false">完成</span>
        </div> -->
      </div>
    </section>
    
    <!-- 无车辆提示 -->
    <div class="dialog_payconfirm" v-show="showConfirm">
      <div class="confirm_cont">
        <div class="confirm_detail">
          <img src="../assets/images/errorTip.png" alt="">
          <h4>系统提示</h4>
          <p>该车辆已出场或找不到入场记录，如在场请稍后再试</p>
          <div class="confirm_btn" @click="closeConfirm">
            确认
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { querylicense } from '../utils/api.js';
export default {
  data() {
    return {
      fare_name: '凯晨世贸停车场', // 停车场名
      showConfirm: false, // 是否显示提示弹窗
      formData: {
        commonCard: '1',  // 车牌类型 1 表示普通车牌  2表示新能源车牌
        num0: '',
        num1: '',
        num2: '',
        num3: '',
        num4: '',
        num5: '',
        num6: '',
        num7: ''
      },
      // 车牌对应下标
      fareList: [
        {value: 0},
        {value: 1},
        {value: 2},
        {value: 3},
        {value: 4},
        {value: 5},
        {value: 6},
        {value: 7}
      ],
      // 自定义键盘
      allKeyWord: {
        _1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
        // _2: [],
        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
        _4: ['L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',],
        _5: ['V', 'W', 'X', 'Y', 'Z', '港', '澳', '学', '领'],
      },
      promptText: '',
      activeKeyWordIndex: -1, // 当前车牌号
      keyBoardStatus: false, // 是否显示键盘弹窗
      firstWrapStatus: false // 选择省份键盘弹窗
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  computed: {
    // 蓝牌车牌 普通机动车
    plate_license_1 () {
      return (
        this.formData.num0 +
        this.formData.num1 +
        this.formData.num2 +
        this.formData.num3 +
        this.formData.num4 +
        this.formData.num5 +
        this.formData.num6
      )
    },
    // 新能源车牌
    plate_license_2 () {
      return (
        this.formData.num0 +
        this.formData.num1 +
        this.formData.num2 +
        this.formData.num3 +
        this.formData.num4 +
        this.formData.num5 +
        this.formData.num6 +
        this.formData.num7
      )
    }
  },
  methods:{
    // 关闭是否有车辆信息提示弹窗
    closeConfirm(){
      this.showConfirm = false;
    },
    // 新能源
    changefare(){
      this.formData.commonCard = 2;
      this.$refs.energy.style.display = "none";
      this.keyBoardStatus = true;
    },
    // 点击第一个输入框
    clickFirstWrap(){
      this.firstWrapStatus = true;
      this.keyBoardStatus = false;
      this.formData.num0 = ''
    },
    // 选中当前块背景颜色
    getBackground(val){
      return this.activeKeyWordIndex == val ? '#AC7C58' : ''
    },
    // 选中当前块文字颜色
    getColor(val){
      return this.activeKeyWordIndex == val ? '#fff' : ''
    },
    // 选择省份
    selectFirstWord (event) {
      console.log(event.target.innerText);
      if (event.target.localName !== 'span') {
        return
      }
      if(event.target.innerText !== '关闭'){
        this.formData.num0 = event.target.innerText; // 选择对应省份 
      }
      this.firstWrapStatus = false;
      this.keyBoardStatus = true;
      this.activeKeyWordIndex = 1;
    },
    // 关闭省份选择弹窗
    closeFirstWord(){
      this.firstWrapStatus = false;
    },
    // 点击自定义键盘
    clickKeyBoard (item) {
      console.log(item)
      this.formData['num' + this.activeKeyWordIndex] = item;  // 键盘当前值赋值到车牌号对应选择框
      // 普通车牌总共7位 新能源车牌总共8位
      if (this.formData.commonCard === '1') {
        this.activeKeyWordIndex++
        if (this.activeKeyWordIndex > 6) {
          this.keyBoardStatus = false
        }
      } else {
        this.activeKeyWordIndex++
        if (this.activeKeyWordIndex > 7) {
          this.keyBoardStatus = false
        }
      }
    },
    // 关闭数字字母键盘弹窗
    closekeyBoard(){
      console.log(this.activeKeyWordIndex)
      if(this.activeKeyWordIndex == 7){
        if(this.formData['num' + (this.activeKeyWordIndex)] == ''){
          this.formData.commonCard = 1;
          this.$refs.energy.style.display = "block";
        }
      }
      this.keyBoardStatus = false;
    },
    // 退格
    deleteWord () {
      console.log(this.activeKeyWordIndex)
      console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
      if (this.activeKeyWordIndex > 1) {
        this.formData['num' + (this.activeKeyWordIndex)] = '';
        if(this.activeKeyWordIndex == 7){
          this.formData.commonCard = 1;
          this.$refs.energy.style.display = "block";
          // this.keyBoardStatus = true;
        }
        // this.activeKeyWordIndex--
      }
    },
    // 选择车牌号
    clickKeyWordWrap (activeKeyWordIndex) {
      console.log(activeKeyWordIndex)
      this.activeKeyWordIndex = activeKeyWordIndex;
      // this.formData['num' + this.activeKeyWordIndex] = '';
      // 当下标非等1的时候  表明这个时候点击的是第一个 选择省份 这个时候不显示选择省份弹窗 否则显示其他对应弹窗
      if(this.activeKeyWordIndex == 0){
        this.firstWrapStatus = true;
        this.keyBoardStatus = false;
      }else if(this.activeKeyWordIndex == 1){
        this.firstWrapStatus = false;
        this.keyBoardStatus = true;
      }else if(this.activeKeyWordIndex == 7){
        this.formData.commonCard = 2;
        this.firstWrapStatus = false;
        this.$refs.energy.style.display = "none";
        this.keyBoardStatus = true;
      }else{
        this.keyBoardStatus = true;
        this.firstWrapStatus = false; // 隐藏省份选择键盘
      }
    },
    // 确认缴费
    submitFn () {
      let plateLicense;
      // let plateNumber = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使警A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使警A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/; // 车牌号校验正则表达式
      let reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/; // 普通车牌
      let xreg  = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DABCEFGHJK]$)|([DABCEFGHJK][A-HJ-NP-Z0-9][0-9]{4}$))/; // 新能源车牌
      /*  
        规则 1: 普通汽车
        车牌号格式：汉字 + A-Z + 5位A-Z或0-9( 车牌号不存在字母I和O防止和1、0混淆)
        *只包括了普通车牌号，教练车，警等车牌号 。部分部队车，新能源不包括在内）
        普通车牌正则 /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        2. 新能源车
        组成：省份简称（1位汉字）+发牌机关代号（1位字母）+序号（6位），总计8个字符，序号不能出现字母I和字母O
        通用规则：不区分大小写，第一位：省份简称（1位汉字），第二位：发牌机关代号（1位字母 不能为数字）
        * 序号位：
        * 小型车，第一位：只能用字母D或字母F，第二位：字母或者数字，后四位：必须使用数字
        * ---([DF][A-HJ-NP-Z0-9][0-9]{4})
        * 大型车，前五位：必须使用数字，第六位：只能用字母D或字母F。
        * ----([0-9]{5}[DF])
        * 新能源正则 /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DABCEFGHJK]$)|([DABCEFGHJK][A-HJ-NP-Z0-9][0-9]{4}$))/;  // 2021年新能源车牌不止有DF
      */
      // 蓝牌普通车辆
      if (this.formData.commonCard == '1') {
        plateLicense = this.plate_license_1
        console.log(plateLicense)
        plateLicense = this.palindrome(plateLicense)
        if (plateLicense.length == 0) {
          this.promptText = "车牌号不能为空";
          return  
        }
        if(!reg.test(plateLicense)){
          this.promptText = "车牌号不正确！！";
          return
        }
      }
      // 新能源车牌
      if (this.formData.commonCard == '2') {
        console.log('新能源')
        plateLicense = this.plate_license_2
        plateLicense = this.palindrome(plateLicense)
        if (plateLicense.length == 0) {
          this.promptText = "车牌号不能为空";
          return
        }
        if(!xreg.test(plateLicense)){
          this.promptText = "车牌号不正确！！";
          return
        }
      }
      this.promptText = "";
      // this.$router.push({path: '/fareDetail',query:{plateNo: plateLicense}});
      console.log(plateLicense);
      const data = {
        // parkSyscode: '', // 停车库唯一标识
        plateNo: plateLicense // 车牌号
      }
      // 查询车辆信息 包括是否存在当前车辆 车辆缴费信息等
      querylicense(data).then((res)=>{
        console.log(res);
        if(res.data.code == '0'){
          this.$router.push({path: '/fareDetail',query:{plateNo: plateLicense}});
        }else{
          // alert(res.data.msg)
          this.showConfirm = true;
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 转换车牌号
    palindrome (str) {
      var arr = str.split('')
      arr = arr.filter(function (val) {
        return (
          val !== ' ' &&
          val !== ',' &&
          val !== '.' &&
          val !== '?' &&
          val !== ':' &&
          val !== ';' &&
          val !== '`' &&
          val !== "'" &&
          val !== '_' &&
          val !== '/' &&
          val !== '-' &&
          val !== '\\' &&
          val !== '' &&
          val !== '(' &&
          val !== ')'
        )
      })
      return arr.join('')
    }
  }
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
@import '../assets/styles/fare.scss';
</style>